<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>

        <META HTTP-EQUIV="expires"CONTENT="0">

        <title>mojo</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="description" content="ECommerce Social Network" />
        <meta name="keywords" content="social, network, friends, auction, expert, share" />
        <meta name="author" content="Gary McCarville" />

        <link rel='stylesheet' type='text/css' media="screen"  href='css/globalStyle.css' />
        <link rel='stylesheet' type='text/css' media="screen"  href='css/carousel.css' />

            <script type='text/javascript' src='javascript/globalJS.js'>
                <script src='javascript/modernizr-1.7.min.js'></script>

        <script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="javascript/jquery.swfobject.1-1-1.js"></script>


        <script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>

        <script type="text/javascript">

            jQuery(document).ready(function() {
                jQuery('#topcarousel').jcarousel();

            });

            function addContentComment() {
                var con = $('#content_items');
                var comment = $('#content_add_comment_input').val();
                con.prepend($('<div id="content_item1" class="content_item"> <div id="content_item_image" class="content_item_image"> <img src="images/suhail_manzoor.jpg" alt="suhail" width="30px" height="30px" /> </div> <div id="content_item_title" class="content_item_title"> Suhail Manzoor </div><div id="content_item_update_time" class="content_item_update_time"> less than a minute ago </div><div id="content_item_message_wrapper" class="content_item_message_wrapper"> <div id="content_item_message" class="content_item_message">' + comment + ' </div> <div id="content_item_icons" class="content_item_icons"> <a href="#nogo" class="toolTip" title="Sell"><img src="images/sell_icon.gif" alt="sell"/></a> <a href="#nogo" class="toolTip" title="Auction"><img src="images/auction_icon.gif" alt="auction"/></a> <a href="#nogo" class="toolTip" title="Like"><img src="images/like_icon.gif" alt="like" /></a> <a href="#nogo" class="toolTip" title="Dislike"><img src="images/dislike_icon.gif" alt="dislike" /></a> <a href="#nogo" class="toolTip" title="Share"><img src="images/share_icon.gif" alt="share" /></a> </div></div></div>').fadeIn('slow'));
            }

            function addContentLink() {
                var con = $('#content_items');
                var comment = $('#content_add_comment_input').val();
                con.prepend($('<div id="content_item1" class="content_item"> <div id="content_item_image" class="content_item_image"> <img src="images/suhail_manzoor.jpg" alt="suhail" width="30px" height="30px" /> </div> <div id="content_item_title" class="content_item_title"> Suhail Manzoor </div><div id="content_item_update_time" class="content_item_update_time"> less than a minute ago </div><div id="content_item_message_wrapper" class="content_item_message_wrapper"> <div id="content_item_message" class="content_item_message">' + comment + ' </div> <div id="content_item_icons" class="content_item_icons"> <a href="#nogo" class="toolTip" title="Sell"><img src="images/sell_icon.gif" alt="sell"/></a> <a href="#nogo" class="toolTip" title="Auction"><img src="images/auction_icon.gif" alt="auction"/></a> <a href="#nogo" class="toolTip" title="Like"><img src="images/like_icon.gif" alt="like" /></a><a href="#nogo" class="toolTip" title="Dislike"><img src="images/dislike_icon.gif" alt="dislike" /></a> <a href="#nogo" class="toolTip" title="Share"><img src="images/share_icon.gif" alt="share" /></a> </div></div></div>').fadeIn('slow'));
            }


            function addCommentLink() {
                $('#content_add_item').html("").html($('<form action="#"><input id="content_add_comment_input" type="text" class="input"/><input type="submit" value="" class="btn" onClick="javascript:$(addContentComment);" /></form>').fadeIn('slow'));

            }

            function addPhotoLink() {

                $('#content_add_item').html("").html($('<a href="#" style="margin:0 30px"><b>Upload from file</b></a><a href="#"><b>Take using webcam</b></a>').fadeIn('slow'));
            }

            function addVideoLink() {

                $('#content_add_item').html("").html($('<a href="#" style="margin:0 30px"><b>Upload from file</b></a><a href="#"><b>Take using webcam</b></a>').fadeIn('slow'));
            }

            function addMusicLink() {

                $('#content_add_item').html("").html($('<a href="#" style="margin:0 30px"><b>Upload from file</b></a><a href="#"><b>Record from microphone</b></a>').fadeIn('slow'));
            }

            function addHyperLink() {
                $('#content_add_item').html("").html($('<form action="#"><input id="content_add_comment_input" type="text" class="input" value="http://www." /><input type="submit" value="Submit" class="btn" onClick="javascript:$(addContentLink);" /></form>').fadeIn('slow'));

            }

            function loadFriendPage() {
                $('#content').html("").load('friend.html').hide().fadeIn('slow');
            }
        </script>



    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <a href="index.html"><img src="images/logo.jpg" alt="logo" /></a>
                <div id="menu">
                    <a href="#nogo">Friends</a>
                    <a href="#nogo">Experts</a>
                    <a href="#nogo">Auctions</a>
                </div>
            </div>
            <div id="top">
                <div id="top_left">
                    <a href="#nogo"><img src="images/suhail_manzoor.jpg" alt="Suhail"/></a>
                    <div id="top_left_first_name"><h1>Suhail</h1></div>
                    <div id="top_left_last_name"><h1>Manzoor</h1></div>
                    <div id="top_left_mojo">mojo: 65</div>
                    <div id="top_left_icons"><img src="images/mail_icon.gif" border="0" alt="mail"/>&nbsp;6&nbsp;<img src="images/offers_icon.gif" alt="offers" />&nbsp;2&nbsp;<img src="images/mail_icon.gif" border="0" alt="answers"/>&nbsp;8&nbsp;</div>
                </div>
                <div id="top_centre">

                    <div id="carousel_wrapper">
                        <ul id="topcarousel" class="jcarousel-skin-mojo">
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/dabs.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /><</a>/li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/amanda_storrie.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/kevin_cunnington.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/craig_mccann.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/sally_hall.jpg" width="50" height="50" alt="" /></a></li>
                            <li><a href="#" onclick="javascript:$(loadFriendPage);"><img src="images/john_halls.jpg" width="50" height="50" alt="" /></a></li>
                    </div>

                </div>
                <div id="top_right">
                    <form method="get" id="searchform" action="">
                        <h1 style="padding-left:21px">Search for someone</h1>

                        <fieldset class="search">
                            <input type="text" class="box" />
                            <button class="btn" title="Submit Search">Search</button>
                        </fieldset>

                        <h2><a href="#">Browse</a><a href="#">Categories</a></h2>
                    </form>
                </div>
            </div>

            <div id="content">

                <div id="content_add">
                    <div id="content_add_icons">
		Add something<br/>
                        <a href="#" id="newsicon" class="news_icon" title="News Update" onclick="javascript:$(addCommentLink);">&nbsp;</a>
                        <a href="#" id="photoicon" class="photo_icon" title="Photo" onclick="javascript:$(addPhotoLink);">&nbsp;</a>
                        <a href="#" id="videoicon" class="video_icon" title="Video" onclick="javascript:$(addVideoLink);">&nbsp;</a>
                        <a href="#" id="musicicon" class="music_icon"title="Music" onclick="javascript:$(addMusicLink);">&nbsp;</a>
                        <a href="#" id="linkicon" class="link_icon" title="Link" onclick="javascript:$(addHyperLink);">&nbsp;</a>
                    </div>
                    <div id="content_add_item">
                        <form action="#">
                            <input id="content_add_comment_input" type="text" class="input" /><input type="submit" value="" class="btn" onClick="javascript:$(addContentComment);" />
                        </form>
                    </div>
                </div>

                <div id="content_items">


                    <div id="content_item" class="content_item">
                        <div id="content_item_image" class="content_item_image">
                            <img src="images/amanda_storrie.jpg" alt="amanda" width="30px" height="30px" />
                        </div>

                        <div id="content_item_title" class="content_item_title">
			Amanda Storrie
                        </div>
                        <div id="content_item_update_time" class="content_item_update_time">
			3 minutes ago
                        </div>

                        <div id="content_item_message_wrapper" class="content_item_message_wrapper">

                            <div id="content_item_message" class="content_item_message">
				Hey Suhail, happy birthday dude, where's the party happening?
                            </div>
                            <div id="content_item_icons" class="content_item_icons">
                                <a href="#nogo" class="toolTip" title="Sell"><img src="images/sell_icon.gif" alt="sell" style="display:inline"/></a>
                                <a href="#nogo" class="toolTip" title="Auction"><img src="images/auction_icon.gif" alt="auction"/></a>
                                <a href="#nogo" class="toolTip" title="Like"><img src="images/like_icon.gif" alt="like" /></a>
                                <a href="#nogo" class="toolTip" title="Dislike"><img src="images/dislike_icon.gif" alt="dislike" /></a>
                                <a href="#nogo" class="toolTip" title="Share"><img src="images/share_icon.gif" alt="share" /></a>
                            </div>

                            <div id="content_item_comments" class="content_item_comments">
                                <img src="images/craig_mccann.jpg" alt="craig" width="20px" height="20px" style="vertical-align:middle; margin:2px 10px 2px 0;" /><b>Craig McCann</b> - Dont forget to invite me guys!<br/>
                                <img src="images/sally_hall.jpg" alt="sally" width="20px" height="20px" style="vertical-align:middle; margin:2px 10px 2px 0;" /><b>Sally Hall</b> - Happy Birthday Suhail, remember older equals wiser :)
                            </div>

                        </div>



                    </div>

                    <div id="content_item" class="content_item">
                        <div id="content_item_image" class="content_item_image">
                            <img src="images/kevin_cunnington.jpg" alt="amanda" width="30px" height="30px" />
                        </div>

                        <div id="content_item_title" class="content_item_title">
				Kevin Cunnington
                        </div>
                        <div id="content_item_update_time" class="content_item_update_time">
				5 minutes ago
                        </div>

                        <div id="content_item_message_wrapper" class="content_item_message_wrapper">

                            <div id="content_item_message" class="content_item_message">
					It's ironic that the many men and women who work hard day in and day out at jobs they don't necessarily like, when asked to take time to design their own futures, often reply, 'I don't have the time.' They let that, their future, slide.
                            </div>
                            <div id="content_item_icons" class="content_item_icons">
                                <a href="#nogo" class="toolTip" title="Sell"><img src="images/sell_icon.gif" alt="sell" style="display:inline"/></a>
                                <a href="#nogo" class="toolTip" title="Auction"><img src="images/auction_icon.gif" alt="auction"/></a>
                                <a href="#nogo" class="toolTip" title="Like"><img src="images/like_icon.gif" alt="like" /></a>
                                <a href="#nogo" class="toolTip" title="Dislike"><img src="images/dislike_icon.gif" alt="dislike" /></a>
                                <a href="#nogo" class="toolTip" title="Share"><img src="images/share_icon.gif" alt="share" /></a>
                            </div>

                        </div>

                    </div>

                    <div id="content_item" class="content_item">
                        <div id="content_item_image" class="content_item_image">
                            <img src="images/dabs.jpg" alt="dabs" width="30px" height="30px" />
                        </div>

                        <div id="content_item_title" class="content_item_title">
                            DABS.com
                        </div>
                        <div id="content_item_update_time" class="content_item_update_time">
                            7 minutes ago
                        </div>

                        <div id="content_item_message_wrapper" class="content_item_message_wrapper">

                            <div id="content_item_message" class="content_item_message">
						If you're looking for an affordable multimedia laptop that's been built to last then take a look at the Toshiba Satellite Pro C660; it's one of our best value all-round boxes, perfect for surfing the net, watching movies and doing work.
                            </div>
                            <div id="content_item_icons" class="content_item_icons">
                                <a href="#nogo" class="toolTip" title="Sell"><img src="images/sell_icon.gif" alt="sell" style="display:inline"/></a>
                                <a href="#nogo" class="toolTip" title="Auction"><img src="images/auction_icon.gif" alt="auction"/></a>
                                <a href="#nogo" class="toolTip" title="Like"><img src="images/like_icon.gif" alt="like" /></a>
                                <a href="#nogo" class="toolTip" title="Dislike"><img src="images/dislike_icon.gif" alt="dislike" /></a>
                                <a href="#nogo" class="toolTip" title="Share"><img src="images/share_icon.gif" alt="share" /></a>
                            </div>

                        </div>

                    </div>

                    <div id="content_item" class="content_item">
                        <div id="content_item_image" class="content_item_image">
                            <img src="images/john_halls.jpg" alt="john" width="30px" height="30px" />
                        </div>

                        <div id="content_item_title" class="content_item_title">
					John Halls
                        </div>
                        <div id="content_item_update_time" class="content_item_update_time">
					7 minutes ago
                        </div>

                        <div id="content_item_message_wrapper" class="content_item_message_wrapper">

                            <div id="content_item_message" class="content_item_message">
						32ft of teak below my feet, here comes happy sailing!
                            </div>
                            <div id="content_item_icons" class="content_item_icons">
                                <a href="#nogo" class="toolTip" title="Sell"><img src="images/sell_icon.gif" alt="sell" style="display:inline"/></a>
                                <a href="#nogo" class="toolTip" title="Auction"><img src="images/auction_icon.gif" alt="auction"/></a>
                                <a href="#nogo" class="toolTip" title="Like"><img src="images/like_icon.gif" alt="like" /></a>
                                <a href="#nogo" class="toolTip" title="Dislike"><img src="images/dislike_icon.gif" alt="dislike" /></a>
                                <a href="#nogo" class="toolTip" title="Share"><img src="images/share_icon.gif" alt="share" /></a>
                            </div>

                        </div>

                    </div>


                    <div id="more_content">
                        <a href="#nogo" alt="more">more news updates</a>
                    </div>


                </div><!-- content_items -->




            </div>

            <div id="footer">

                <div id="footer_menu">
                    <a href="#nogo">link1</a>
                    <a href="#nogo">link2</a>
                    <a href="#nogo">link3</a>
                    <a href="#nogo">link4</a>
                    <a href="#nogo" class="last">link5</a>
                </div>

            </div>
        </div>
    </body>
</html>